
<template>
  <div style="margin-top: 5px; margin-left: 20px">
    <a-steps v-show="vdata.showStyle == showStyleEnum.step" :current="vdata.currentStep - 1" type="navigation">
      <a-step title="主体信息" />
      <a-step title="结算信息" />
      <a-step title="商户资料" />
    </a-steps>
    <a-divider />
    <!-- 1. 基础信息  -->
    <a-form
      v-show="vdata.showStyle == showStyleEnum.block || vdata.currentStep == 1"
      ref="stepForm1Ref"
      style="margin-top: 20px" 
      :model="applymentDetailInfo"
      :label-col="{ span: 4 }"
      :wrapper-col="{ span: 8 }"
      :rules="vdata.step1Rules"
    >
      <a-divider class="jeepay-m-divider" orientation="left" style="color: #1A66FF;">商户基本信息</a-divider>
      <a-form-item label="商户类型" name="merchantType">
        <a-radio-group v-model:value="applymentDetailInfo.merchantType" :disabled="isDisable">
          <a-radio :value="1">个人</a-radio>
          <a-radio :value="2">个体工商户</a-radio>
          <a-radio :value="3">企业</a-radio>
        </a-radio-group>
      </a-form-item>

      <a-form-item v-if="applymentDetailInfo.merchantType != '1'" label="商户子类型" name="companyChildType">
        <a-radio-group v-model:value="applymentDetailInfo.companyChildType" :disabled="isDisable">
          <a-radio value="1">普通企业</a-radio>
          <a-radio value="2">事业单位</a-radio>
          <a-radio value="3">其他组织</a-radio>
        </a-radio-group>
      </a-form-item>

      <a-form-item label="商户简称" name="mchShortName">
        <a-input v-model:value="applymentDetailInfo.mchShortName" :disabled="isDisable" />
        <span class="jeepay-tip-text">商户简称</span>
      </a-form-item>

      <!--个体或企业-->
      <template v-if="applymentDetailInfo.merchantType == '2' || applymentDetailInfo.merchantType == '3'">
        <a-divider class="jeepay-m-divider" orientation="left" style="color: #1A66FF;">营业执照信息</a-divider>
        <a-form-item label="营业执照照片" name="licenseImg">
          <JeepayUpload
            v-model:src="applymentDetailInfo.licenseImg"
            bizType="applyment"
            ocrType="license"
            @ocrScan="licenseImgFunc"
          />
        </a-form-item>
        <a-form-item label="营业执照注册号" name="licenseNo">
          <a-input v-model:value="applymentDetailInfo.licenseNo" :disabled="isDisable" />
        </a-form-item>

        <a-form-item label="营业执照名称" name="mchFullName">
          <a-input v-model:value="applymentDetailInfo.mchFullName" :disabled="isDisable" />
        </a-form-item>

        <a-form-item label="营业执照注册地址" name="licenseAddress">
          <a-input v-model:value="applymentDetailInfo.licenseAddress" />
        </a-form-item>

        <a-form-item label="营业执照注册号开始日期" name="licenseEffectBegin">
          <a-input
            v-model:value="applymentDetailInfo.licenseEffectBegin"
            placeholder="yyyy-MM-dd"
            style="width: 150px; margin-right: 10px"
          />
        </a-form-item>

        <a-form-item label="营业执照注册结束日期" name="licenseEffectEnd">
          <a-input
            v-model:value="applymentDetailInfo.licenseEffectEnd"
            placeholder="yyyy-MM-dd"
            :disabled="applymentDetailInfo.licenseEffectEnd == '长期'"
            style="width: 150px; margin-right: 10px"
          />
          <a-checkbox
            :checked="applymentDetailInfo.licenseEffectEnd == '长期'"
            @change="(e: any) => applymentDetailInfo.licenseEffectEnd = e.target.checked ? '长期' : ''"
          >
            长期
          </a-checkbox>
        </a-form-item>
      </template>

      <a-divider class="jeepay-m-divider" orientation="left" style="color: #1A66FF;">法人信息</a-divider>
      <a-form-item label="法人身份证正面" name="idcard1Img">
        <JeepayUpload v-model:src="applymentDetailInfo.idcard1Img" ocrType="idCard" bizType="applyment" @ocrScan="idCardImgFunc" />
      </a-form-item>

      <a-form-item label="法人姓名" name="idcardName">
        <a-input v-model:value="applymentDetailInfo.idcardName" :disabled="isDisable" />
      </a-form-item>

      <a-form-item label="法人证件号码" name="idcardNo">
        <a-input v-model:value="applymentDetailInfo.idcardNo" :disabled="isDisable" />
        <span class="jeepay-tip-text">负责人证件号码 目前只支持身份证号</span>
      </a-form-item>

      <a-form-item label="法人身份证反面" name="idcard2Img">
        <JeepayUpload v-model:src="applymentDetailInfo.idcard2Img" ocrType="idCard" bizType="applyment" @ocrScan="idCardImgFunc" />
      </a-form-item>

      <a-form-item label="法人身份证起始有效期" name="idcardEffectBegin">
        <a-input v-model:value="applymentDetailInfo.idcardEffectBegin" placeholder="yyyy-MM-dd" style="width: 150px; margin-right: 10px" />
      </a-form-item>

      <a-form-item label="法人身份证结束有效期" name="idcardEffectEnd">
        <a-input v-model:value="applymentDetailInfo.idcardEffectEnd" placeholder="yyyy-MM-dd" :disabled="applymentDetailInfo.idcardEffectEnd == '长期'" style="width: 150px; margin-right: 10px" />
        <a-checkbox :checked="applymentDetailInfo.idcardEffectEnd == '长期'" @change="(e: any) => applymentDetailInfo.idcardEffectEnd = e.target.checked ? '长期' : ''">长期</a-checkbox>
      </a-form-item>

      <a-form-item label="手持身份证照" name="idcardInHandImg">
        <JeepayUpload v-model:src="applymentDetailInfo.idcardInHandImg" bizType="applyment" />
      </a-form-item>
           
      <a-divider class="jeepay-m-divider" orientation="left" style="color: #1A66FF;">商户经营信息</a-divider>
      <a-form-item label="商户所在省、市、县" name="areaCode">
        <JeepayAreaSelect v-model:value="applymentDetailInfo.areaCode" />
      </a-form-item>

      <a-form-item label="商户详细地址" name="address">
        <a-input v-model:value="applymentDetailInfo.address" />
      </a-form-item>

      <a-form-item label="MCC码商户行业编号" name="mccCode">
        <JeepayLeshuaMccSelect v-model:value="applymentDetailInfo.mccCode" :disabled="isDisable" />
      </a-form-item>
    </a-form>

    <!-- 2. 结算信息  -->
    <a-form
      v-show="vdata.showStyle == showStyleEnum.block || vdata.currentStep == 2"
      ref="stepForm2Ref"
      :model="applymentDetailInfo"
      :label-col="{ span: 4 }"
      :wrapper-col="{ span: 8 }"
      :rules="vdata.step2Rules"
    >
      <a-col :offset="1"><a-divider orientation="left" style="color: #1a66ff">账户信息</a-divider></a-col>

      <a-form-item label="账户类型" name="acctType">
        <a-radio-group v-model:value="applymentDetailInfo.acctType" @change="() => emit('itemRender')">
          <template v-if="applymentDetailInfo.merchantType != '1'">
            <a-radio value="1">个人账户</a-radio>
            <a-radio value="2">公司账户</a-radio>
          </template>
          <template v-else>
            <a-radio value="1">个人账户</a-radio>
          </template>
        </a-radio-group>
      </a-form-item>


      <a-form-item label="结算标志" name="acctLegalFlag">
        <a-radio-group v-model:value="applymentDetailInfo.acctLegalFlag" @change="() => emit('itemRender')">
          <template v-if="applymentDetailInfo.merchantType == '1'">
            <a-radio value="1">法人结算</a-radio>
          </template>
          <template v-else>
            <a-radio value="1">法人结算</a-radio>
            <a-radio value="0">非法人结算</a-radio>
          </template>
        </a-radio-group>
      </a-form-item>
      <!--非法人结算--> 
      <template v-if="applymentDetailInfo.acctLegalFlag === '0'">
        <a-form-item label="非法人结算授权书" name="nonLegSettleAuthPic">
          <JeepayUpload v-model:src="applymentDetailInfo.nonLegSettleAuthPic" bizType="applyment" />
        </a-form-item>

        <a-form-item label="非法人身份证正面" name="settAccountIdcard1Img">
          <JeepayUpload v-model:src="applymentDetailInfo.settAccountIdcard1Img" ocrType="idCard" bizType="applyment" @ocrScan="settleIdCardImgFunc" />
        </a-form-item>
        <a-form-item label="非法人身份证背面" name="settAccountIdcard2Img">
          <JeepayUpload v-model:src="applymentDetailInfo.settAccountIdcard2Img" bizType="applyment" />
        </a-form-item>
        <a-form-item label="结算人证件号" name="settAccountIdcardNo">
          <a-input v-model:value="applymentDetailInfo.settAccountIdcardNo" />
        </a-form-item>
      </template> 

      <a-form-item label="开户名" name="acctHolder">
        <a-input v-model:value="applymentDetailInfo.acctHolder" />
        <span class="jeepay-tip-text">法人结算：与法人姓名一致;企业账户：与营业执照注册名称一致</span>
      </a-form-item>

      <a-form-item v-if="(applymentDetailInfo.merchantType == '2' || applymentDetailInfo.merchantType =='3') && applymentDetailInfo.acctType ==='2' " label="开户许可证" name="companyAccountLicenseImg">
        <JeepayUpload v-model:src="applymentDetailInfo.companyAccountLicenseImg" bizType="applyment" />
      </a-form-item>

      <a-form-item label="银行卡正面" name="settAccountLicenseImg">
        <JeepayUpload v-model:src="applymentDetailInfo.settAccountLicenseImg" bizType="applyment" ocrType="bankCard" @ocrScan="bankCardFunc" />
      </a-form-item>

      <a-form-item label="银行卡号" name="settAccountNo">
        <a-input v-model:value="applymentDetailInfo.settAccountNo" />
      </a-form-item>


      <a-form-item label="开户银行名称" name="bankName">
        <JeepayHuluBankCodeSelect v-model:value="applymentDetailInfo.bankName" bizType="applyment" @changeSelect="allbranhcListFilter" />
      </a-form-item>


      <a-form-item label="开户支行名称" name="branchName">
        <a-input v-model:value="applymentDetailInfo.branchName" />
        <span><a href="https://www.icvio.cn/" target="_blank">开户支行名称及联行号查询</a></span>
      </a-form-item>

      <a-form-item label="联行号" name="acctUnionpay">
        <a-input v-model:value="applymentDetailInfo.acctUnionpay" />
      </a-form-item>

      <a-form-item label="银行预留号码" name="acctMobile">
        <a-input v-model:value="applymentDetailInfo.acctMobile" />
      </a-form-item>
    </a-form>

    <!-- 3. 商户资料  -->
    <a-form
      v-show="vdata.showStyle == showStyleEnum.block || vdata.currentStep == 3"
      ref="stepForm3Ref"
      :model="applymentDetailInfo"
      :label-col="{ span: 4 }"
      :wrapper-col="{ span: 8 }"
      :rules="vdata.step3Rules"
    >
      <a-divider class="jeepay-m-divider" orientation="left" style="color: #1A66FF;">联系人信息</a-divider>
      <a-button shape="round" style="margin-left: 40%; margin-bottom:10px " type="primary" @click="isLegal('contact')">
        <arrow-right-outlined />
        点此使用法人信息
      </a-button>
      <a-form-item label="联系人姓名" name="contactName">
        <a-input v-model:value="applymentDetailInfo.contactName" />
      </a-form-item>

      <a-form-item label="联系人身份证号" name="contactIdcardNo">
        <a-input v-model:value="applymentDetailInfo.contactIdcardNo" />
      </a-form-item>    

      <a-form-item label="联系人手机号码" name="contactPhone">
        <a-input v-model:value="applymentDetailInfo.contactPhone" />
      </a-form-item>

      <a-form-item label="客服电话" name="servicePhone">
        <a-input v-model:value="applymentDetailInfo.servicePhone" />
      </a-form-item>

      <a-divider class="jeepay-m-divider" orientation="left" style="color: #1A66FF;">照片资料</a-divider>

      <a-form-item label="经营场所内设照片" name="insidePic">
        <JeepayUpload v-model:src="applymentDetailInfo.insidePic" bizType="applyment" />
      </a-form-item>

      <a-form-item label="门头照 " name="storeOuterImg">
        <JeepayUpload v-model:src="applymentDetailInfo.storeOuterImg" bizType="applyment" />
      </a-form-item>

      <a-form-item label="收银台照片" name="storeCashierImg">
        <JeepayUpload v-model:src="applymentDetailInfo.storeCashierImg" bizType="applyment" />
      </a-form-item>
    </a-form>


    <a-divider />

    <div style="margin-top: 50px; margin-bottom: 50px; text-align: center">
      <a-button
        v-show="vdata.showStyle == showStyleEnum.step && vdata.currentStep > 1"
        type="primary"
        @click="toPrevStep"
      >
        <left-circle-outlined /> 上一步
      </a-button>
            &nbsp;&nbsp;
      <a-button
        v-show="vdata.showStyle == showStyleEnum.step && vdata.currentStep < 3"
        type="primary"
        @click="toNextStep"
      >
        下一步 <right-circle-outlined />
      </a-button>
    </div>
  </div>
</template>

<script setup lang="ts">
import {
    ref,
    reactive,
    getCurrentInstance,
    defineEmits,
    inject,
    watch,

} from 'vue'
import ruleGenerator from '@/utils/ruleGenerator'
import allList from '../../../JeepayBankCodeSelect/bankcodeHulu.json'
// 获取当前实例的代理对象
const { proxy }: any = getCurrentInstance()

const { $infoBox } = getCurrentInstance()!.appContext.config.globalProperties

// 显示类型枚举值
const showStyleEnum = {
    step: 'step',
    block: 'block',
}

// emit： 向父组件进行通讯。
const emit = defineEmits(['itemRender'])

// 响应式数据
const vdata: any = reactive({
    showStyle: 'step', // 显示类型： step-分步,  block-整页显示
    isTempData: false, // 是否保存草稿
    isvDefaultPaywayFee: {} as any, // 服务商默认费率
    steps: ['主题信息', '结算信息', '费率', '其他', '商户资料'],
    branhcList: [], // 支行列表
    currentStep: 1,
    receiverTableData: [] as any,
    step1Rules: {
        merchantType:[ruleGenerator.requiredSelect('商户类型', 'number')],
        companyChildType:[ruleGenerator.requiredSelect('商户子类型')],
        mchShortName:[ruleGenerator.requiredInput('商户简称')],
        licenseImg:[ruleGenerator.requiredUpload('营业执照照片')],
        licenseNo:[ruleGenerator.requiredInput('营业执照注册号')],
        mchFullName:[ruleGenerator.requiredInput('营业执照名称')],
        licenseAddress:[ruleGenerator.requiredInput('营业执照注册地址')],
        licenseEffectBegin:[ruleGenerator.requiredInput('营业执照注册号开始日期')],
        licenseEffectEnd:[ruleGenerator.requiredInput('营业执照注册结束日期')],
        idcard1Img:[ruleGenerator.requiredUpload('法人身份证正面')],
        idcardName:[ruleGenerator.requiredInput('法人姓名')],
        idcardNo:[ruleGenerator.requiredInput('法人证件号码')],
        idcard2Img:[ruleGenerator.requiredUpload('法人身份证反面')],
        idcardEffectBegin:[ruleGenerator.requiredInput('法人身份证起始有效期')],
        idcardEffectEnd:[ruleGenerator.requiredInput('法人身份证结束有效期')],
        idcardInHandImg:[ruleGenerator.requiredUpload('手持身份证照')],
        areaCode:[ruleGenerator.requiredSelect('商户所在省、市、县', 'array')],
        address:[ruleGenerator.requiredInput('商户详细地址')],
        mccCode:[ruleGenerator.requiredSelect('MCC码商户行业编号')]
    },
    step2Rules: {
        acctType:[ruleGenerator.requiredSelect('账户类型')],
        acctLegalFlag:[ruleGenerator.requiredSelect('结算标志')],
        nonLegSettleAuthPic:[ruleGenerator.requiredUpload('非法人结算授权书')],
        settAccountIdcard1Img:[ruleGenerator.requiredUpload('非法人身份证正面')],
        settAccountIdcardNo:[ruleGenerator.requiredInput('结算人证件号')],
        acctHolder:[ruleGenerator.requiredInput('开户名')],
        settAccountIdcard2Img:[ruleGenerator.requiredUpload('非法人身份证背面')],
        nonLegalPersonCertificateStartDate:[ruleGenerator.requiredInput('非法人证件开始日期')],
        nonLegalPersonCertificateEndDate:[ruleGenerator.requiredInput('非法人证件结束日期')],
        companyAccountLicenseImg:[ruleGenerator.requiredUpload('开户许可证')],
        settAccountLicenseImg:[ruleGenerator.requiredUpload('银行卡正面')],
        settAccountNo:[ruleGenerator.requiredInput('银行卡号')],
        bankName:[ruleGenerator.requiredInput('开户银行名称')],
        branchName:[ruleGenerator.requiredInput('开户支行名称')],
        // acctMobile:[ruleGenerator.requiredInput('银行预留号码')]


    },
    step3Rules: {
        contactName:[ruleGenerator.requiredInput('联系人姓名')],
        contactIdcardNo:[ruleGenerator.requiredInput('联系人身份证号')],
        contactPhone:[ruleGenerator.requiredInput('联系人手机号')],
        insidePic:[ruleGenerator.requiredUpload('经营场所内设照片')],
        storeOuterImg:[ruleGenerator.requiredUpload('门头照')],
        storeCashierImg:[ruleGenerator.requiredUpload('收银台照片')]        
    },
})

// 接收进件参数（包含 商户号， ifCode ）
let mchApplymentDataRef: any = inject('mchApplymentData')
let mchApplymentData: any = mchApplymentDataRef.value

// 进件成功，进件成功后修改驳回，做修改操作禁用
let isDisable = mchApplymentData.state == '2' ||  mchApplymentData.state == '10' 

// 接收父组件的进件详细参数
let applymentDetailInfoInject: any = inject('applymentDetailInfo')
let applymentDetailInfo: any = applymentDetailInfoInject.value

/**
 * 银行卡读取填充
 */
function bankCardFunc(orcObject) {

    if (orcObject) {
        if (orcObject.settAccountNo) {
            applymentDetailInfo.settAccountNo = orcObject.settAccountNo
        }
    }
}


/**
 * 被授权人身份证读取填充
 */
function authCardFunc(orcObject) {

    if (orcObject) {
        if (orcObject.idcardName) {
            applymentDetailInfo.authName = orcObject.idcardName
        }
        if (orcObject.idcardNo) {
            applymentDetailInfo.authCertNo = orcObject.idcardNo
        }

        if (orcObject.idcardEffectBegin) {
            applymentDetailInfo.authStartDate = orcObject.idcardEffectBegin
        }

        if (orcObject.idcardEffectEnd) {
            if (orcObject.idcardEffectEnd === '长期') {
                applymentDetailInfo.authEndDate = 'forever'
            } else {
                applymentDetailInfo.authEndDate = orcObject.idcardEffectEnd
            }
        }

    }
}

/**
 * 法人身份证读取填充
 */
function idCardImgFunc(orcObject) {
    if (orcObject) {
        if (orcObject.idcardName) {
            applymentDetailInfo.idcardName = orcObject.idcardName
        }
        if (orcObject.idcardNo) {
            applymentDetailInfo.idcardNo = orcObject.idcardNo
        }
        if (orcObject.idcardEffectBegin) {
            applymentDetailInfo.idcardEffectBegin = orcObject.idcardEffectBegin
        }
        if (orcObject.idcardEffectEnd) {
                applymentDetailInfo.idcardEffectEnd = orcObject.idcardEffectEnd
        }
    }
}

/**
 * 非法人身份证读取填充
 */
function settleIdCardImgFunc(orcObject) {
    if (orcObject) {
        if (orcObject.idcardNo) {
            applymentDetailInfo.settAccountIdcardNo = orcObject.idcardNo
        }
    }
}

/**
 * 营业执照读取填充
 */
function licenseImgFunc(orcObject) {
  if (orcObject) {
      if (orcObject.mchFullName) {
          applymentDetailInfo.mchFullName = orcObject.mchFullName
      }
      if (orcObject.licenseNo) {
          applymentDetailInfo.licenseNo = orcObject.licenseNo
      }
      if (orcObject.licenseEffectBegin) {
          applymentDetailInfo.licenseEffectBegin = orcObject.licenseEffectBegin
      }
      if(orcObject.licenseAddress){
          applymentDetailInfo.licenseAddress = orcObject.licenseAddress
      }
      if (orcObject.licenseEffectEnd) {
          if (orcObject.licenseEffectEnd === '长期') {
              applymentDetailInfo.licenseEffectEnd = '长期'
          } else {
              applymentDetailInfo.licenseEffectEnd = orcObject.licenseEffectEnd
          }
      }
  }
}

// 将法人信息填入到指定地方
function isLegal(type){
  if (type) {
    if (type == 'contact') {
      // 将法人信息填入到商户联系人中
      applymentDetailInfo.contactName = applymentDetailInfo.idcardName
      applymentDetailInfo.contactIdcardNo = applymentDetailInfo.idcardNo
    }
  }
}

function changeBank(key, item) {
    vdata.bank = item
    applymentDetailInfo.headBankNo = key
}

function onSearchbankBranch(value) {
    if (!value) {
        return
    }

}

// 参数注入： 配置方式
let configMode: any = inject('configMode')

// 注入： 是否预览模式
let isView: any = inject('isView')


// 初始化
function init(initData) {
    initData.merchantType = 2
    initData.companyChildType = '1'
    initData.acctype = '1'
    initData.acctLegalFlag = '1'
}

if (mchApplymentData.isNew || !mchApplymentData.applyDetailInfo) {
    init(applymentDetailInfo)
}


// 监听

function allbranhcListFilter(object) {
    if (object) {
        // applymentDetailInfo.bankCode = object.key
        // $selectByBankCode(object.key).then((res) => {
        //     vdata.branhcList = res
        // })
    }
}

function setPbcBankId(object) {
    if (object) {
        applymentDetailInfo.acctUnionpay = object.key
    }
}


// 下一步
function toNextStep() {
    // 验证是否通过
    proxy.$refs['stepForm' + vdata.currentStep + 'Ref'].validate().then(() => {
        vdata.currentStep++
    })
}

// 上一步
function toPrevStep() {
    vdata.currentStep--
}

function validateAllForm(step: number) {
    return proxy.$refs['stepForm' + step + 'Ref'].validate().then(() => {
        if (step >= 3) {
            return Promise.resolve()
        }
        return validateAllForm(++step)
    })
}


function convertAreaCode() {
    if (applymentDetailInfo.areaCode) {
        return applymentDetailInfo.areaCode[
            applymentDetailInfo.areaCode.length - 1
        ]?.value
    }
    return ''
}

function branchProvinceAndCityFunction(value) {
    if (value) {
        const provinceAndCity = value?.map((item) => item.label).join(',')
        applymentDetailInfo.provinceAndCity = provinceAndCity
    }
}

function bankCodeFunc() {
    if (applymentDetailInfo.bankName) {
        allList.forEach(item => {
            if (item.bankName == applymentDetailInfo.bankName) {
                applymentDetailInfo.bankCode = item.bankType
            }
        })
    }
}

// 点击【保存】的前置事件, 需要返回Promise对象
function saveDataPreCallback(isTemp) {
  if (applymentDetailInfo.merchantType == 1) {
    applymentDetailInfo.mchFullName = applymentDetailInfo.mchShortName + '[商户_' + applymentDetailInfo.idcardName + ']'
  }
    // 保存草稿只校验当前步骤数据
    if (isTemp) {
        return Promise.resolve()
    }

    // 验证所有表单
    return validateAllForm(1)
        .then(() => {
            return Promise.resolve()
        })
        .catch((params: any) => {
            $infoBox.message.error('数据填写不完整， 请检查后提交')
            return Promise.reject()
        })
}

defineExpose({ saveDataPreCallback })
</script>

<style lang="less" scoped>
.jeepay-tip-text {
    font-size: 10px;
    color: rebeccapurple;
}

.option-left {
    width: 50%;
    word-wrap: break-word;
    white-space: normal;
    word-break: break-all;
}

.option-right {
    color: rgb(153, 153, 153);
}

.option-bottom {
    word-wrap: break-word;
    white-space: normal;
    word-break: break-all;
    color: rgb(153, 153, 153);
}
</style>